<?php
/**
 * Radcodes - SocialEngine Module
 *
 * @category   Application_Extensions
 * @package    Story
 * @copyright  Copyright (c) 2009-2010 Radcodes LLC (http://www.radcodes.com)
 * @license    http://www.radcodes.com/license/
 * @version    $Id$
 * @author     Vincent Van <vincent@radcodes.com>
 */
?>
<?php
$story = $this->story;
$photoCount = $this->paginator->getTotalItemCount();

/*
        <h4>
          <span><?php echo $this->translate('Story Album'); ?>
          (<?php echo $this->htmlLink(array(
              'route' => 'story_extended',
              'controller' => 'photo',
              'action' => 'list',
              'subject' => $this->story->getGuid(),
            ), $this->translate(array("%s photo", "%s photos", $photoCount), $photoCount), array(
          )) ?>)
          </span> 
        </h4>
 */

?>

    <?php
      // Render the menu
      echo $this->navigation()
        ->menu()
        ->setContainer($this->photosNavigation)
        ->setUlClass('navigation')
        ->render();
    ?>
        <p><?php echo $this->story->description ?></p>
        <br/>
			    <?php $i=-1; foreach( $this->paginator as $photo ): $i++; ?>
			      <?php // if($this->story->photo_id != $photo->file_id):?>
            <div class="story_float_<?php echo $i%4<2?'left':'right' ?> story_photo_image story_record_<?php echo $story->getIdentity();?>">
                <div class="story_photo">
                  <a href="<?php echo $photo->getHref() ?>"><img src="<?php echo $photo->getPhotoUrl() ?>" /></a>
                </div>   
              <div class="story_content">
                <div class="story_title">
                 <a href="<?php echo $photo->getHref() ?>"><?php echo $photo->title; ?></a>
                </div> 
                <div class="story_meta" title="<?php echo $photo->description; ?>">
                  <?php echo $photo->description; ?>
                </div>
              </div>
              </div>
              <?php if($i < $photoCount-1) { ?>
                <?php if($i%4==0){ ?>
                <div class="arrow_right">&rarr;</div> 
                <?php } ?>
                <?php if($i%4==2){ ?>
                <div class="arrow_left">&larr;</div>  
                <?php } ?>
                <?php if($i%4==1){ ?>
                <div class="arrow_down_right">&darr;</div>
                <?php } ?>
                <?php if($i%4==3){ ?>
                <div class="arrow_down_left">&darr;</div>
                <?php } ?>
              <?php } ?>
			      <?php // endif; ?>
			    <?php endforeach;?>
    <div style="clear:both;"></div>
    <?php echo $this->paginationControl($this->paginator, null, null, array()); ?> 

  <style>
  .arrow_right, .arrow_left, .arrow_down_right, .arrow_down_left{position: relative;height: 0;}
  .arrow_left{left: 300px;top: 100px;}
  .arrow_right{left: -24px;top: 100px;}
  .arrow_down_right{left: 460px;top: -20px;}
  .arrow_down_left{left: 140px;top: -20px;}
  .story_float_left{float: left !important;}
  .story_float_right{float: right !important;}
  .story_photo_image{
    border: 1px solid #DDDDDD;
    border-radius: 5px 5px 5px 5px;
    float: left;
    height: 240px;
    margin-bottom: 20px;
    margin-right: 37px;
    overflow: hidden;
    width: 44%;
   }
  div.story_photo_image .story_photo {
    float: none;
    height: 190px;
    margin-left: 0;
    overflow: hidden;
    width: 100%;
  }
  div.story_photo_image .story_photo img {
      width: 100%;
    }
  div.story_photo_image .story_title {
    font-size: 11px;
    font-weight: bold;
    margin: 4px;
  }
  div.story_photo_image .story_meta {
    border-top: 1px solid #DDDDDD;
    color: #999999;
    margin: 0;
    overflow: hidden;
    padding: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;

  }
  </style>